<!-- score-list.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学生成绩信息列表</title>
    <style>
        h1 {
            text-align: center;
            font-family: "楷体", "KaiTi", "SimKai", "STKaiti", sans-serif;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-family: "仿宋", "SimSun", sans-serif;
            table-layout: auto;
        }

        #search {
            width: 100%;
            margin-bottom: 15px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        input, button {
            padding: 5px;
            margin-right: 10px;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <span class="navbar-text me-3" id="welcome-text">欢迎, 管理员</span>
            <a href="#" class="btn btn-outline-light logout-btn" onclick="logout()">退出登录</a>
        </div>
    </div>
</nav>

<div id="app">
    <h1>学生信息列表</h1>
    <div id="search">
        学号<input type='text' v-model="condition.studentId">
        姓名<input type='text' v-model="condition.name">
        性别<select v-model="condition.gender">
        <option value="">全部</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
        最高排名<input type='number' v-model="condition.minRank">
        最低排名<input type='number' v-model="condition.maxRank">
        <button @click="searchStudents">搜索</button>
        <button @click="resetCondition">重置</button>
        <button @click="addStudent" style="margin-left: 20px;">新增学生</button>
    </div>

    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>总分</th>
            <th>排名</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="student in studentList" :key="student.id">
            <td>{{ student.id }}</td>
            <td>{{ student.studentId }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.gender }}</td>
            <td>{{ student.totalScore }}</td>
            <td>{{ student.rank }}</td>
            <td>{{ student.updateTime }}</td>
            <td>
                <button @click="deleteStudent(student)">删除</button>
                <button @click="updateStudent(student)">修改</button>
            </td>
        </tr>
        <tr v-if="studentList.length === 0">
            <td colspan="9" style="text-align: center;">没有找到匹配的学生记录</td>
        </tr>
        </tbody>
    </table>
</div>




<!-- 引入 axios 和 Vue -->
<script src="js/axios.min.js"></script>
<script>
    function logout() {
        // 清除session中的用户信息
        sessionStorage.removeItem('user');

        // 重定向到登录页面
        window.location.href = '/login.html';
    }
</script>
<script type="module">
    import {createApp} from './js/vue.esm-browser.js';

    createApp({
        data() {
            return {
                studentList: [],
                condition: {
                    studentId: '',
                    name: '',
                    gender: '',
                    minTotalScore: '',
                    maxTotalScore: '',
                    minRank: '',
                    maxRank: ''
                },
                currentPage: 1,
                pageSize: 10,
                totalCount: 0,
                errorMessage: ''
            };
        },
        methods: {
            // 获取学生列表
            async getStudents() {
                this.errorMessage = '';
                this.currentPage = '';
                try {
                    const result = await axios.get('/student/search');
                    this.studentList = result.data;
                } catch (error) {
                    alert('获取学生信息失败:' + (error.message || "未知错误"));
                }
            },

            // 删除学生
            async deleteStudent(student) {
                if (confirm(`确定要删除 ${student.name} (${student.studentId}) 吗？`)) {
                    try {
                        await axios.delete(`/student/${student.id}`);
                        alert("删除成功");
                        this.getStudents();
                    } catch (error) {
                        alert("删除失败：" + (error.message || "未知错误"));
                    }
                }
            },

            // 新增学生
            addStudent() {
                localStorage.removeItem('studentId');
                window.location.href = '/insert.html';
            },

            // 修改学生
            updateStudent(student) {
                localStorage.setItem('studentId', student.id);
                window.location.href = '/update.html';
            },

            // 搜索学生
            async searchStudents() {
                try {
                    const result = await axios.get('/student/search', {params: this.condition});
                    this.studentList = result.data;
                } catch (error) {
                    alert('搜索学生信息失败:' + (error.message || "未知错误"));
                }
            },

            // 重置搜索条件
            resetCondition() {
                this.condition = {
                    studentId: '',
                    name: '',
                    gender: '',
                    minTotalScore: '',
                    maxTotalScore: '',
                    minRank: '',
                    maxRank: ''
                };
                this.getStudents();
            },


        },
        mounted() {
            this.getStudents();
        }
    }).mount('#app');

</script>
</body>
</html>